<template>
    <div class="box">
        <!-- 搜索框的插件 -->
          <van-search v-model="value" placeholder="请输入搜索关键词"  shape='round'/>
  

    <div>
      <van-sidebar v-model="activeKey" id="div1">
        <van-sidebar-item
          v-for="item in categoryList"
          :key="item.id"
          :title="item.name"    
          @click="onChange(item.id)"
        />
      </van-sidebar>
     <!-- 使用右侧的组件  并将其中图片所需要的数据进行传递-->
     <ImagesComponent :categoryArr="categoryArr"></ImagesComponent>
    </div>

    </div>
</template>

<script>
// 导入分类页面中左侧的组件 leftcomponent.vue
import LeftComponent from "@/views/CaregoryComponent/Leftcomponent.vue"
// 引用分类页面中右侧的组件 imagesComponent.vue
// import ImagesComponent from "@/views/CaregoryComponent/ImagesComponent.vue"
import ImagesComponent from "@/views/CaregoryComponent/LmagesComponent.vue"
// 引入分类页面所需要的请求方法
import {GetChannelDataApi, GetFenleiDataApi} from "@/utils/http"
export default {
    name: "category",
    data() {
        return {
         value:"",  //这是搜索框需要的属性    
         activeKey:0,    //这是左侧组件需要的
         categoryList:[], //这是分类页右侧的组件,上方图片的数据
         categoryArr:{} ,  //这个是往右侧子组件中 传递的数据 注意这个不是数组 是一个对象
        };
    },
    components:{
        // 注册分类页面中左侧组件
       LeftComponent,
    //    注册分类页面中右侧的组件
       ImagesComponent,
    },
    created(){
      GetChannelDataApi().then((res)=>{
        console.log(res);
        //  这里是将数据复制到 data的categoryList中,  这个数据值左侧导航栏的数据
        this.categoryList=res.data.data.categoryList;  
        // 这里是将右侧组件中的数据复制到data中categoryArr  
         this.categoryArr=res.data.data.currentCategory
      
      })
      
      //  GetFenleiDataApi({
      //               id:1005000
      //       }).then((res)=>{
      //            this.categoryArr=res.data.data.currentCategory
      //           console.log(this.categoryArr);
      //       })
    //  这个是一开始时右侧的页面数据,调用下面的方法
      // this.onChange(1005000);

     
    },
    mounted(){
        // setTimeout(()=>{
        //     console.log(this.categoryList);
        // },300)
    },
    methods:{
      // 这里是调用,左侧导航的点击事件,点击触发
      // 这里是将点击的商品的id传递进  请求中 当其的参数
        onChange(id){   //id 请求参数
            
            console.log(id);
            GetFenleiDataApi({   //发送axios请求
                    id:id     
            }).then((res)=>{
              console.log(res);
              // 将数据赋值到 data中的categoryArr之中 ,这个属性最后会被传递到 右侧的组件中
                 this.categoryArr=res.data.data.currentCategory
                console.log(this.categoryArr);
            })
        }
    }
};
</script>

<style scoped lang="less">
.box{
  div{
    
    // 
    .slide-enter,
.slide-leave-to {
  right: -100%;
  float:left;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 0.5s linear;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}
van-sidebar-item{
    float:left;
}
#div1{
    float:left;
}

  }

 
   
}
</style>